<!--
 * @Description: 计算属性
 * @Author: zzj
 * @Date: 2021-10-09 12:03:47
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-10 17:31:30
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>计算属性【状态】</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>
<body>
	<div id="app">
		<button @click="addHandler">添加</button>
		<ul>
			<li v-for="s in students_male" :key="s.id">
				{{s.id}}
				{{s.name}}
				{{s.gender}}
			</li>
		</ul>
		<ul>
			<li v-for="s in students_male" :key="s.id">
				{{s.id}}
				{{s.name}}
				{{s.gender}}
			</li>
		</ul>
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				students:[{
						id:1,
						name:"terry",
						age:13,
						gender:"male"
					}, 
					{
						id: 2,
						name: "larry",
						age: 12,
						gender: "female"
					},
					{
						id: 3,
						name: "tom",
						age: 13,
						gender: "male"
					},
					{
						id: 4,
						name: "jacky",
						age: 13,
						gender: "male"
					}
				]
			}, 
			//计算属性,调用时不加括号，多次调用只执行一次,不能传参
			computed:{
				students_male(){
					console.log("计算====")
					return this.students.filter(item=>item.gender === "male")
				}
			},
			//方法，调用时需要加括号，多次调用执行相应次数，可以传参
			methods:{
				addHandler(){
					let stu = {
						id: 5,
						name: "lisa",
						age: 13,
						gender: "male"
					}
					this.students.push(stu)
				}
				// students_male() {
				// 	console.log("执行====")
				// 	return this.students.filter(item => item.gender === "male")
				// }
			}
		})
	</script>
</body>
</html>